<template>
  <div class="identity">
    <van-nav-bar title="身份认证" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="content">
      <div class="tips-msg">
        <div class="warn-icon">
          <i class="icon iconfont icon-jinggao"></i>
        </div>
        <div class="warn-content">
          <p class="warn-title">未认证</p>
          <p class="warn-detail">为了保证您在平台交易的资金安全，请先完成身份认证</p>
        </div>
      </div>
      <div class="verify-info">
        <div class="notice">依据国际惯例KYC和《反洗钱法》的要求，平台需要验证您的身份</div>
        <div class="verify-content">
          <div class="country">
            <div class="id-info cot" @click="showDiv">
              <span>*</span>
              <label for>国籍</label>
              <input
                type="text"
                v-model="countrys"
                placeholder="请选择国家"
                ref="countrys"
                disabled
                value
              >
              <img class="cott" src="../../../assets/images/icon-arrow-left.png" alt>
            </div>
            <van-popup v-model="showCountry" psosition="botton" :overlay="true">
              <van-picker
                show-toolbar
                title="请选择国家"
                :columns="columns"
                @cancel="onCancel"
                @confirm="onConfirm"
              ></van-picker>
            </van-popup>
            <van-cell-group>
              <van-field value v-model="nameOne" placeholder="请输入真实名字" label="名" required/>
            </van-cell-group>
            <van-cell-group>
              <van-field value v-model="nameTwo" placeholder="请输入真实姓氏" label="姓" required/>
            </van-cell-group>

            <van-cell-group @click="showID">
              <van-field
                label="证件类型"
                ref="myCard"
                :placeholder="myCard"
                required
                disabled
                right-icon="arrow-down"
              />
            </van-cell-group>
            <van-popup v-model="showIdType" psosition="botton" :overlay="true">
              <van-picker
                show-toolbar
                title="请选择证件类型"
                :columns="idtype"
                @cancel="onCancel"
                @confirm="onConfirmTwo"
              ></van-picker>
            </van-popup>

            <van-cell-group>
              <van-field value v-model="myNum" label="证件号码" placeholder="请输入证件号" required/>
            </van-cell-group>
            <van-cell-group class="photo" v-show="flagPic">
              <van-field class="ipt" value label="证件照片" required disabled/>
              <p class="detail">请添加本人清晰的证件照片（不超过10M/JPEG或PNG）</p>
            </van-cell-group>
            <div class="uploaderFiels" v-show="flagPic">
              <div class="fiels">
                <div class="file-style">
                  <img
                    class="head-img"
                    src="../../../assets/images/idcard-front.png"
                    ref="idcardFront"
                  >
                  <input
                    type="file"
                    name="files"
                    id="fileOne"
                    accept="image/jpg, image/png, image/jpeg"
                    @change="changeOne"
                  >
                </div>
                <p class="text">证件正面照</p>
              </div>
              <div class="fiels">
                <div class="file-style">
                  <img
                    class="head-img"
                    src="../../../assets/images/idcard-behind.png"
                    ref="idcardBehind"
                  >
                  <input
                    type="file"
                    name="files"
                    id="fileTwo"
                    accept="image/jpg, image/png, image/jpeg"
                    @change="changeTwo"
                  >
                </div>
                <p class="text">证件反面照</p>
              </div>
              <div class="fiels">
                <div class="file-style">
                  <img
                    class="head-img"
                    src="../../../assets/images/idcard-hand.png"
                    ref="idcardHand"
                  >
                  <input
                    type="file"
                    name="files"
                    id="fileThree"
                    accept="image/jpg, image/png, image/jpeg"
                    @change="changeThree"
                  >
                </div>
                <p class="text">本人手持证件照</p>
              </div>
            </div>
            <van-cell-group>
              <van-field value v-model="myBirth" label="出生地址" placeholder="请输入您的出生地址" required/>
            </van-cell-group>
            <van-cell-group>
              <van-field value v-model="myPhone" label="联系方式" placeholder required/>
            </van-cell-group>
            <div class="tips">友情提示：请务必保证所有填写资料准确无误，资料一旦提交，不可修改。</div>
            <div class="submit">
              <button type="submit" class="submit-btn" @click="submit">提交</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import qs from "qs";
import {
  countryList,
  batchUploadFile,
  uploadFile,
  idCard
} from "../../../axios/api.js";
import { NavBar, Cell, CellGroup, Field, Popup, Picker, Toast } from "vant";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Toast.name]: Toast
  },
  data() {
    return {
      showCountry: false,
      showIdType: false,
      columns: [],
      idtype: ["身份证", "护照", "驾驶证"],
      token: "",
      countrys: "",
      nameOne: "",
      nameTwo: "",
      myNum: "",
      myBirth: "",
      myCard: "请输入证件类型",
      myCardId: "",
      myCountry: "请选择国家",
      countrysId: "",
      myPhone: "",
      picList: [],
      flagPic: false
    };
  },
  created() {
    //国籍
    countryList().then(res => {
      const list = res.data.data;
      console.log(list);
      for (const i in list) {
        const items = list[i];
        const countryChineseName = items.countryChineseName;
        this.columns.push(items.countryChineseName);
        console.log(this.columns);
      }
    });
  },
  watch: {
    myCard() {
      console.log(this.myCard, 888);
      if (this.myCard != "请输入证件类型") {
        this.flagPic = true;
      } else {
        this.flagPic = false;
      }
    }
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 控制国家列表的显示隐藏
    showDiv(e) {
      console.log(e, 888);
      this.showCountry = true;
    },
    // 控制证件类型的显示隐藏
    showID() {
      this.showIdType = true;
    },
    onCancel(picker) {
      this.showCountry = false; //表示点击取消的时候,组件隐藏掉,关闭
      this.showIdType = false;
    },
    onConfirm(value) {
      this.showCountry = false;
      this.showIdType = false;
      this.$refs.countrys.value = value;
      this.countrys = value;
      for (var i = 0; i < this.columns.length; i++) {
        if (this.columns[i] == this.countrys) {
          console.log(i);
          this.countrysId = i;
          console.log(this.countrysId);
        }
      }
      console.log(this.$refs.countrys.value);
    },
    onConfirmTwo(value) {
      this.showCountry = false;
      this.showIdType = false;
      this.$refs.myCard.value = value;
      this.myCard = value;
      console.log(this.myCard);
      for (var i = 0; i < this.idtype.length; i++) {
        if (this.idtype[i] == this.myCard) {
          console.log(i);
          this.myCardId = i;
          console.log(this.myCardId);
        }
      }
      console.log(this.$refs.myCard.value);
    },
    //选择图片后执行 上传正面
    changeOne(event) {
      let UpFiles = new FormData();
      UpFiles.append("file", $("#fileOne")[0].files[0]);
      UpFiles.append("type", this.myCardId);
      console.log(UpFiles);
      console.log($("#fileOne")[0].files[0]);
      uploadFile(UpFiles).then(res => {
        console.log(res.data.data);
        this.picList.push(res.data.data);
        console.log(this.picList);
        this.$refs.idcardFront.src = res.data.data;
      });
    },
    changeTwo(event) {
      let UpFiles = new FormData();
      UpFiles.append("file", $("#fileTwo")[0].files[0]);
      UpFiles.append("type", this.myCardId);
      console.log(UpFiles);
      console.log($("#fileTwo")[0].files[0]);
      uploadFile(UpFiles).then(res => {
        console.log(res.data.data);
        this.picList.push(res.data.data);
        console.log(this.picList);
        this.$refs.idcardBehind.src = res.data.data;
      });
    },
    changeThree(event) {
      let UpFiles = new FormData();
      UpFiles.append("file", $("#fileThree")[0].files[0]);
      UpFiles.append("type", this.myCardId);
      console.log(UpFiles);
      console.log($("#fileThree")[0].files[0]);
      uploadFile(UpFiles).then(res => {
        console.log(res.data.data);
        this.picList.push(res.data.data);
        console.log(this.picList);
        this.$refs.idcardHand.src = res.data.data;
      });
    },
    submit() {
      var that = this;
      $.ajax({
        type: "post",
        cache: false,
        traditional: true,
        dataType: "json",
        url: window.nowHref + "/idCard/add",
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        data: {
          token: window.sessionStorage.getItem("token"),
          idCard: that.myNum,
          name: that.nameOne,
          countryId: that.countrysId,
          surname: that.nameTwo,
          credentialsType: that.myCardId,
          birthAddress: that.myBirth,
          contactAddress: that.myPhone,
          idCardImgUrl: that.picList
        },
        success: function(data) {
          console.log(data);
          if (data.code == "200") {
            Toast("修改成功！");
            that.$router.push({name:'userCenter'})
            localStorage.setItem('cardId',222)
          } else {
            Toast(data.msg);
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/less/variable.less";
.cot {
  position: relative;
  .cott {
    position: absolute;
    right: 10px;
    top: 15px;
  }
}
.van-cell .van-cell__left-icon {
  font-size: 10px;
  color: @theme_color;
}
.van-cell__title,
.van-cell__value {
  flex: auto;
  text-align: left;
}
.van-cell--required::before {
  left: 15px;
}
/deep/ .van-field__label {
  text-align: left;
  margin-left: 10px;
}
.van-cell:not(:last-child)::after {
  border-bottom: 0;
}
.van-cell {
  text-align: left;
}
.van-popup {
  position: fixed;
  top: 83.4%;
  width: 100%;
}
.identity {
  background: #fff;
  .content {
    .tips-msg {
      display: flex;
      padding: 10px 15px;
      background: #fff7ea;
      font-size: 16px;
      color: #f44;
      .warn-icon {
        margin-right: 10px;
        line-height: 2;
        i {
          font-size: 32px;
        }
      }
      .warn-content {
        flex: 1;
        text-align: left;
        line-height: 1.5;
        .warn-title {
          font-weight: 700;
        }
        .warn-detail {
          font-size: 14px;
        }
      }
    }
    .verify-info {
      .notice {
        padding: 10px 15px;
        text-align: left;
        font-size: 14px;
        color: #999;
      }
      .verify-content {
        .country {
          .id-info {
            text-align: left;
            padding: 10px 15px;
            width: 100%;
            background-color: #fff;
            border-bottom: 1px solid #ebedf0;
            box-sizing: border-box;
            line-height: 24px;
            position: relative;
            background-color: #fff;
            color: #323233;
            font-size: 14px;
            span {
              color: #f44;
            }
            input {
              border: 0;
              width: 62%;
              background: #fff;
              margin-left: 60px;
            }
          }
          .icon-star {
            font-size: 12px;
            color: @theme_color;
          }
          .photo::after {
            border-width: 0;
          }
          .ipt {
            padding: 15px 15px 0 15px;
          }
          .detail {
            padding: 0 15px;
            text-align: left;
            color: #969799;
          }
          .tips {
            padding: 10px 15px;
            text-align: left;
            color: #969799;
          }
          .submit {
            margin: 0.67rem 0;
            width: 100%;
            background-color: #fff;
            color: #fff;
            font-size: @base_textSize;
            .submit-btn {
              padding: 10px;
              width: 90%;
              height: 1.07rem;
              border: 0;
              border-radius: 3px;
              background: #ff976a;
              outline: none;
            }
          }
          .uploaderFiels {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 10px 15px;
            .fiels {
              margin: 0 30px 0 0;
              .file-style {
                position: relative;
                display: inline-block;
                width: 3.07rem;
                height: 2.27rem;
                overflow: hidden;
                text-decoration: none;
                text-indent: 0;
                line-height: 20px;
                img {
                  display: block;
                  width: 3.07rem;
                  height: 2.27rem;
                }
                input {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  right: 0;
                  top: 0;
                  opacity: 0;
                }
              }
              .text {
                margin: 5px 0;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
